import { Component, OnInit, ViewContainerRef, ViewChild, TemplateRef } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { ApiService } from '../../services/api.service'
import { EchartService } from '@app/shared/utils/echart.service'
import {CursorService} from "@core/http/cursor.service";

@Component({
  selector: 'app-tag-detail',
  templateUrl: './tag-detail.component.html',
  styleUrls: ['./tag-detail.component.scss']
})
export class TagDetailComponent implements OnInit {
  id ='';
  public tag :any ={};
  public content: TemplateRef<any>;
  public userList: any[] = [];
  public recordList: any[] = [];
  public assetOption;
  public levelOption;
  public riskOption;
  public ageOption;
  public preference :any={};
  option: Array<any>  = [{
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [{
      type: 'category',
      data: [],
      axisLine: {
        lineStyle: {
          color: "#999"
        }
      }
    }],
    yAxis: [{
      type: 'value',
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#DDD'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#333"
        },
      },
      nameTextStyle: {
        color: "#999"
      },
      splitArea: {
        show: false
      }
    }],
    series: [{
      name: '',
      type: 'line',
      data: [],
      lineStyle: {
        normal: {
          width: 8,
          color: {
            type: 'linear',

            colorStops: [{
              offset: 0,
              color: '#A9F387' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#48D8BF' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        }
      },
      itemStyle: {
        normal: {
          color: '#fff',
          borderWidth: 10,
          /*shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 100,*/
          borderColor: "#A9F387"
        }
      },
      smooth: true
    }]
  }]

  @ViewChild('tagInfo', { static: true })
  private tagInfo;

  constructor(private echartService: EchartService,
              private route: ActivatedRoute,
              private apiService: ApiService,
              public cursorService: CursorService,
  ) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id')

    this.getTagDetail(this.id);
    this.getTagExecute(this.id);
    //人员列表
    this.getTagCustomer(this.id);
    //产品偏好
    this.getTagPreference(this.id);
    //基本特征
    this.getTagBasicRecord(this.id);
    // this.content = this.tagInfo
  }

  private getTagDetail(id) {
    this.apiService.getTagDetail(id).subscribe(data => {
      this.tag = data
    })

    // this.apiService.getCustomerTagUserList().subscribe(data => {
    //   this.userList = data
    // })

    // this.apiService.getCustomerTagRecordList().subscribe(data => {
    //   this.recordList = data
    // })

    // this.apiService.getCustomerViewData().subscribe(({ tradeAge }) => {
    //   this.ageOption = this.echartService.getOption({ type: 'pie', data: tradeAge })
    // })
    //
    // this.assetOption = this.echartService.getOption({
    //   type: 'pie',
    //   data: [
    //     {
    //       name: '20万以上',
    //       value: 35
    //     },
    //     {
    //       name: '5万以下',
    //       value: 45
    //     },
    //     {
    //       name: '5万-20万',
    //       value: 65
    //     }
    //   ]
    // })
    //
    // this.levelOption = this.echartService.getOption({
    //   type: 'pie',
    //   data: [
    //     {
    //       name: '普卡',
    //       value: 421
    //     },
    //     {
    //       name: '金卡',
    //       value: 153
    //     },
    //     {
    //       name: '白金卡',
    //       value: 82
    //     }
    //   ]
    // })
    //
    // this.riskOption = this.echartService.getOption({
    //   type: 'pie',
    //   data: [
    //     {
    //       name: '激进',
    //       value: 83
    //     },
    //     {
    //       name: '保守',
    //       value: 32
    //     },
    //     {
    //       name: '稳健',
    //       value: 86
    //     },
    //     {
    //       name: '平衡',
    //       value: 26
    //     },
    //     {
    //       name: '积极',
    //       value: 65
    //     }
    //   ]
    // })
  }
  //执行记录
  getTagExecute(id){
    this.cursorService.limit =10
    this.apiService.getTagExecute(id,this.cursorService).subscribe(data => {
      // console.log('--recordList:'+JSON.stringify(data))
      this.recordList = data
    })
  }
  getTagCustomer(id){
    this.cursorService.limit =10
    this.apiService.getTagCustomer(id,this.cursorService).subscribe(data => {
      console.log('--userList:'+JSON.stringify(data))
      this.userList = data
    })
  }
  //产品偏好
  getTagPreference(id){
    this.cursorService.limit =10
    this.apiService.getTagPreference(id,this.cursorService).subscribe(data => {
      console.log('--getTagPreference:'+JSON.stringify(data))
      // let dataTime =[];
      // let dataList= [];
      // for(let item of data['data']){
      //   dataTime.push(this.getLocalTime(item['timestamp']))
      //   dataList.push(item['value'])
      // }
      // let aa ={}
      // this.option[1]={ xAxis: [{
      //     data: dataTime,
      //   }],
      //   series: [{
      //     data: dataList,
      //   }]}
      this.preference = data

    })
  }
  getTagBasicRecord(id){
    this.cursorService.limit =10
    this.apiService.getTagBasicRecord(id).subscribe(data => {
      console.log('--getTagPreference:'+JSON.stringify(data))
      let dataTime =[];
      let dataList= [];
      for(let item of data['data']){
        dataTime.push(this.getLocalTime(item['timestamp']))
        dataList.push(item['value'])
      }
      this.option[1]={ xAxis: [{
          data: dataTime,
        }],
        series: [{
          name:'人数',
          data: dataList,
        }]}

    })
  }
  //时间戳转换为日期格式
   getLocalTime(nS) {
     let now = new Date(nS);
     let   year=now.getFullYear();
     let   month=now.getMonth()+1;
     let   date=now.getDate();
     let time=  year+"-"+month+"-"+date;
     return time;
   }
  recordRefresh(){
    this.getTagExecute(this.id)
  }
  public onChangeTab(content) {
    this.content = content
  }
}
